


const { Component, PureComponent } = require("react");


class DemoA extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      num: 1,
      flag: true,
    }
  }
  add() {
    this.setState((state, props) => ({ num: state.num + 1 }))
  }
  // 控制是否进入更新阶段  返回true表示进入，返回false表示不进入
  // 当调用forceUpdate时，会绕过shouldComponentUpdate，一定会进入到更新阶段
  // 为什么要设计这样的一开关？
  //    状态分两类：
  //       1）参与页面渲染的状态
  //       2）不参与页面渲染的状态
  //    默认情况下，这个状态不管参数页面渲染，当状态变化了，都会render
  //    我们期望只有参与页面渲染的状态发生了变化，才去render
  //    所以我们就需要这样一个开关，这个开关就可以根据不同的状态来控制是否渲染
  // shouldComponentUpdate(props, state) {
  //   // console.log("shouldComponentUpdate...");
  //   // console.log(state);
  //   // console.log(this.state.num);
  //   // if (this.state.num !== state.num) {
  //   //   console.log("+++++++++++++++++++")
  //   //   return true;
  //   // } else {
  //   //   console.log("------------------");
  //   //   return false;
  //   // }

  //   return false
  // }
  render() {
    console.log("render...");
    let { num } = this.state;
    return (
      <div>
        <h2>类组件</h2>
        <h3>{num}</h3>
        <button onClick={this.add.bind(this)}>+1</button>
      </div>
    )
  }

  componentDidUpdate(props, state) {
    console.log("componentDidUpdate...");
  }

  componentDidMount() {
    console.log("componentDidMount...");
  }
}

export default DemoA;

